<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"L>
        <title>背景裁切</title>

        <style>
            /* background-clip 属性用来设置元素的背景裁切到盒子的哪里
               border-box 背景延伸至边框（默认)
               padding-box 背景延伸至内边（padding），不会绘制到边框处，仅在dotted(点状线)、dashed(虚线)边框可察觉
               content-box 背景被裁剪至 内容区
            */

            .box1 {
                width: 300px;
                height: 300px;
                border: 10px dotted #000;
                background-image: url(sg.jpg);
                padding: 60px;
                margin-bottom: 10px;
            }

            
            .box2 {
                width: 300px;
                height: 300px;
                border: 10px dotted #000;
                background-image: url(sg.jpg);
                padding: 60px;
                /* padding-box会将背景图片裁切到padding区域 不会渲染在border区域 */
                background-clip:padding-box;
                margin-bottom: 10px;
            }

            .box3 {
                width: 300px;
                height: 300px;
                border: 10px dotted #000;
                background-image: url(sg.jpg);
                padding: 60px;
                /* content-box会将背景图片裁切到content区域 不会渲染在padding区域 */
                background-clip:content-box;
                margin-bottom: 10px;
            }

            .box4 {
                width: 300px;
                height: 300px;
                border: 10px dotted #000;
                background-image: url(sg.jpg);
                padding: 60px;
                background-clip:content-box;
                background-size: 100px auto;
                /* 背景起源 */
                background-origin:content-box;
            }

        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </body>
</html>